<!-- 商品选择弹出窗 -->
<template>
	<section class="dialogPlayer" v-if="state.isShowDialog">
		<section style="width:800px;height:600px;position: relative;">
			<video class="mus" width="800" height="600" controls autoplay>
				<source :src="state.url" type="video/mp4" />
			</video>
            <el-icon @click="state.isShowDialog = false" style="position: active;top:-15px;right:-15px;position: absolute;color: #fff; font-size: 28px;">
                <ele-CircleCloseFilled />
            </el-icon>
		</section>
	</section>
</template>

<script setup lang="ts" name="cropper">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
// 定义变量内容
const state = reactive({
	isShowDialog: false,
	url: '',
});

// 打开弹窗
const openDialog = (url: string) => {
	console.log(url)
	state.isShowDialog = true;
	state.url = url;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
//
:deep(.el-dialog) {
	background-color: var(--el-overlay-color-lighter) !important;
	.el-dialog__header {
		display: none;
	}
	.el-dialog__body {
		padding: 0 !important;
		background-color: none !important;
	}
}
.dialogPlayer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	.mus {
		height: 600px;
		width: 800px;
		background-color: rgba(0, 0, 0, 0.8);
	}
}
</style>
